import { Space, Divider , Radio, Form, Input,Button,Card } from 'antd';
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
import { queryPatrolRecordData,updateOrSavePatrolRecordItem,updatePatrolRecord } from '@/services/patrolrecord';
import { history, useModel } from 'umi';
const { TextArea } = Input;
import React, { useState, useRef, useEffect } from 'react';

import styles from './index.less';
import deviceImg from '@/assets/test.jpg';

const TableList: React.FC = (props:any) => {
  const { params } = props.match;
  const { initialState } = useModel('@@initialState');
  const { dicts } = initialState || {};
  const [formVals,setFormVals] = useState<any>();
  const [isWorks,setIsWorks] = useState<any>();
  const [currentIndex,setCurrentIndex] = useState<number>(0);
  const [leveEnumValues, setLeveEnumValues] = useState({});
  const [typeEnumValues, setTypeEnumValues] = useState({});
 
  const [form] = Form.useForm();
  const onFinish = (values: any) => {
    updateRecord(1);
    updatePatrolRecord({id:formVals.record.id,isConform:0})
    history.push("/mochaITOM/patrolRecordDetails1/result/"+params.jobId)
  };


   
  const updateRecord = async (isLast:number) => {
 
    if(formVals.record.isConform!=null){
      return  setCurrentIndex(currentIndex+1);
    }
    const fieldsValue = await form.getFieldsValue();
    if(fieldsValue["isWorks"+currentIndex]==0){
      await form.validateFields(['defectInfo'+currentIndex]);
    }
    if(isLast==0)
      setCurrentIndex(currentIndex+1);
    const item={};
    item.recordId=formVals.record.id;
    item.jobItemId=formVals.sights[currentIndex].id;
    item.isWorks=fieldsValue["isWorks"+currentIndex];
    item.defectInfo=fieldsValue["defectInfo"+currentIndex];
    item.jobId=formVals.sights[currentIndex].jobId;
    item.memo=fieldsValue["memo"+currentIndex];
    await updateOrSavePatrolRecordItem(item);
  };



    const setStateData = async () => {
      const records = await   queryPatrolRecordData(params);
      var isWorks1=[];
      for(var i=0;i< records.sights.length;i++){
        records["isWorks"+i]= records.sights[i].isWorks==null?1:records.sights[i].isWorks;
        records["defectInfo"+i]=records.sights[i].defectInfo;
        records["memo"+i]=records.sights[i].memo;
        isWorks1.push(records.sights[i].isWorks==null?1:records.sights[i].isWorks);
      }
      console.log(records)

      setIsWorks(isWorks1);
      setFormVals(records);
    };
console.log(isWorks)
useEffect(() => {
  setStateData();
  if (dicts) {
    setLeveEnumValues(dicts["7Enum"]);
    setTypeEnumValues(dicts["4Enum"]);
 
  }
 }, []);


  return (
    <div className={styles.main} >
        <Card  title={formVals?.record?.jobName+(formVals?.record?.isConform==null?"":formVals?.record?.isConform==0?"(已提交)":"(已确认)")} headStyle={{textAlign: 'center',background:'rgb(68 120 221)'}}  bodyStyle={{background:'rgb(55 94 187)'}}>
      {formVals?(
       <Form  form={form} name="dynamic_form_nest_item"   onFinish={onFinish}  initialValues={formVals} >  
            {formVals.sights.map((field,key) => (
             
              <Space key={key} className={styles.item} style={{display:currentIndex==key?'block':'none'}} >
                <div className={styles.stem}>
                  <p className={styles.stem1}> {formVals?.sights[key].index} . ({leveEnumValues[formVals?.sights[key].importantLevel]}) {formVals?.sights[key].content}</p>
                  <p className={styles.stem2}>位置:{formVals?.sights[key].areaName} {formVals?.sights[key].position} 项目类别:{typeEnumValues[formVals?.sights[key].patroItemlType]}</p>
                </div>
               
                <div className={styles.answer}>
               
                <Form.Item
                
                  name={ 'isWorks'+key}
                  label=""
                  rules={[{ required: true, message: 'Please pick an item!' }]}
                >
                  <Radio.Group  disabled={formVals.record.isConform!=null} onChange={(e)=>{
                    var isWorks1=[...isWorks];
                    isWorks1[key]=e.target.value;
                    setIsWorks(isWorks1);
                   
                  
                  }}>
                    <Radio value={1}>正常</Radio>
                    <Radio value={0 }>故障</Radio>
                  </Radio.Group>
                </Form.Item>
                {isWorks[key]==0?(
                  <>
                    <Form.Item
                    {...field}
                    name={'defectInfo'+key}
                 
                    rules={[{ required: true, message: '请输入缺陷描述' }]}
                  >
                    <Input  disabled={formVals.record.isConform!=null}      placeholder="请输入缺陷描述"/>
                  </Form.Item>
                  <Form.Item
                    {...field}
                
                    name={ 'memo'+key}
                    rules={[{ message: '请输入备注' }]}
                  >
                    <TextArea     disabled={formVals.record.isConform!=null}      placeholder="请输入备注" rows={2}  maxLength={255}  />
                  </Form.Item>
                </>
               ):null}
             
                </div>
             
            
          
              </Space>   ))}
     
              <Form.Item>
              <div className={ currentIndex==0&&formVals.sights.length>1?styles.flexend:styles.flexbetween}>
                {currentIndex>0?
                  <Button    type="default"  onClick={()=>setCurrentIndex(currentIndex-1)}  >
                    上一项
                  </Button>:null
                }
                {currentIndex<formVals.sights.length-1?
                  <Button type="primary"   onClick={()=>{updateRecord(0)}} style={{float:'right'}}>
                    下一项
                  </Button>:null
                } 
                {currentIndex==formVals.sights.length-1&&formVals.record.isConform==null?
                <Button type="primary" htmlType="submit"  style={{float:'right'}}>
                  提交
                </Button>
                :null}
              </div>
             </Form.Item>
      
    </Form>):null} 
    </Card>
    </div>
  );
};

export default TableList;
